import React from "react";

/*
  props 默认值：
  1. 函数式组件的用法：Header.defaultProps
  2. 类组件的用法：
      a. static defaultProps
      b. Content.defaultProps
*/


/*
  函数式组件中跟 vue 的 setup 一样是不能使用 this 所以无法向类组件一样获取参数

*/
const Header = function(props){

  return (<>
  <div>欢迎来到 {props.title} 世界</div>
  </>)
}
// 因为函数式组件中无法使用 static，所以我们定义默认值的时候可以使用  Header.defaultProps
// 进行定义
Header.defaultProps = {
  title: 'Vue'
}


/*
  类组件需要使用 this.props 进行获取父组件传递过来的数据
*/
class Content extends React.Component {

  // static 定义静态私有属性和方法用的
  //所谓的私有：是被定义后，子类在继承的时候不会将其私有属性和方法给继承过去
  // static defaultProps = {
  //   //该属性当父组件没有传递的时候就会使用这里定义的默认值
  //   contentName: '不绝'
  // }

  render(){
    // console.log(this.props);
    return (<>
      <div> {this.props.contentName} 学习 React 实际上是在学习 JavaScript</div>
    </>)
  }
}
// 类组件也可以通过 Content.defaultProps 来进行设置默认值
Content.defaultProps = {
  contentName: '高举'
}

export default class App extends React.Component {
  render(){

    return (<>
      <div>
        <Header title='React' />
        {/* 在 vue 中属性传值的时候只要不是纯字符串那么我们都要使用 v-bind 进行插入 */}
        {/* 在 react 中属性传值的时候只要不是纯字符串那么我们都要使用 {} 进行包裹 */}
        <Content contentName='涛涛' count={10} />
      </div>
    </>)
  }
}

